<template>
  <div class="container">
    <!--
   弹出框组件
   v-model="show"  // 控制是否显示对话框 true展示  false隐藏
   :show-confirm-button="false"  // 不显示 “确定” 按钮
   close-on-click-overlay // 点击旁处  关闭对话框

   @input:当前组件的value值发生变化，要传递给
   父组件的v-model里边去的,使得弹出框可以不断完成关闭、显示动作

   注意：
     $emit('input',$event)就这样配置，van-dialog内部已经把$event.target.value都集成好了

     如果当前标签是普通的input框标签，那么$emit('input',$event.target.value)两个参数就都需要设置全乎
     closed 关闭弹窗时触发，isOneLevel=true，使得一级菜单被设置激活
    -->
    <van-dialog
      :value="value"
      @input="$emit('input',$event)"
      :show-confirm-button="false"
      close-on-click-overlay
      @closed="isOneLevel=true"
    >
      <van-cell-group v-if="isOneLevel">
        <van-cell title="不感兴趣" icon="location-o" @click="articleDislike()"></van-cell>
        <van-cell title="反馈垃圾内容" icon="location-o" is-link @click="isOneLevel=false"></van-cell>
        <van-cell title="拉黑作者" icon="location-o"></van-cell>
      </van-cell-group>
      <van-cell-group v-else>
        <van-cell icon="arrow-left" @click="isOneLevel=true"/>
        <van-cell
         v-for="item in reportList"
         :key="item.value"
         :title="item.title"
         @click="articleReport(item.value)"
         icon="location-o"
         ></van-cell>
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script>
import { apiArticleDislike, apiArticleReport } from '@/api/article.js'
export default {
  name: 'more-action',
  data () {
    return {
      // 举报类型：
      reportList: [
        { title: '其他问题', value: 0 },
        { title: '标题夸张', value: 1 },
        { title: '低俗色情', value: 2 },
        { title: '错别字多', value: 3 },
        { title: '旧闻重复', value: 4 },
        { title: '广告软文', value: 5 },
        { title: '内容不实', value: 6 },
        { title: '涉嫌违法犯罪', value: 7 },
        { title: '侵权', value: 8 }
      ],
      isOneLevel: true // 判断展示一级 或 二级 反垃圾内容 true:一级  false:二级
    }
  },
  // props: ['value', 'articleID'],
  props: {
    value: {
      type: Boolean,
      default: false
    },
    articleID: {
      type: String,
      required: true
    }
  },
  methods: {
  // 文章举报处理
    async articleReport (type) {
      try {
        const args = { articleID: this.articleID, type }
        await apiArticleReport(args)
      } catch (err) {
        if (err.response.status === 409) {
          // return 停止后续代码的执行
          return this.$toast.fail('文章已经被举报了')
        }
      }
      // 提示成功
      this.$toast.success('文章举报成功')
      // 关闭弹框
      this.$emit('input', false)
    },
    // 文章不感兴趣处理
    async articleDislike () {
      await apiArticleDislike(this.articleID)
      this.$toast.success('处理成功')
      // 关闭弹出框，修改父组件的showDialog的值为false，
      // 进而影响子组件关闭弹窗
      this.$emit('input', false)

      // 调用自己的事件，使得父组件页面文章清除
      this.$emit('dislikeSuccess')
    }
  }
}
</script>

<style scoped lang='less'></style>
